<template>
    <div style="width: 100%; height: 100%">
        <div class="chapterExercisesContainers">
            <div class="chapterExercisesContainers_containers">
                <div class="chapterExercisesContainers_containers_content" v-if="readyStatus">
                    <div class="container" style="word-break: break-all;" v-if="isStart">
                        <p v-for="(item, index) in questionsArry" v-show="index == flag" class="container_p2">{{ index +
                    1 }}、
                            <span v-if="item.questionType === 1">【单选题】</span>
                            <span v-else-if="item.questionType === 2">【多选题】</span>
                            <span v-else>【判断题】</span>
                            {{ item.name }} ({{ item.score }}分)
                        </p>
                        <div class="list_groupContainer">
                            <div class="list_groupContainer_group" v-for="(item, index) in chooseArry"
                                v-show="index == flag">
                                <div v-for='(value, indexs) in item'>
                                    <div class="list_groupContainer_group_item" @click="getChoose(index, indexs)"
                                        :class="{ 'chooseStyle': indexs == styleFlag }">
                                        {{ optionName[indexs] }}、
                                        {{ value }}
                                    </div>
                                </div>
                                <div class="list_groupContainer_buttonGroup">
                                    <el-button type="primary" size="mini" @click="backQuestion(index)"
                                        v-show="flag != 0">上一题</el-button>
                                    <el-button type="primary" size="mini" @click="nextQuestion(index)"
                                        v-show="flag != questionsArry.length - 1">下一题</el-button>
                                    <!-- <el-button type="success" size="mini" @click="submit()"
                                        v-show="flag == questionsArry.length - 1">提交</el-button> -->
                                </div>
                            </div>
                        </div>
                        <div class="list_groupContainer_progressContainers">
                            <div class="list_groupContainer_progressContainers_div">
                                <div class="list_groupContainer_progressContainers_progress">
                                    <div class="progress-bar progress-bar-striped" :style="{ width: progress + '%' }">
                                    </div>

                                </div>
                                <div class="list_groupContainer_progressContainers_progress_text">{{
                    progress }}%</div>
                            </div>

                            <div class="list_groupContainer_progressContainers_text">共{{ questionsArry.length }}题，第{{
                    flag + 1 }}题</div>
                        </div>


                    </div>
                    <div class="questionNameContainers" v-else>
                        <div class="questionNameContainers_content">
                            <div class="questionName">{{ queryParams.name }}</div>
                            <div class="questionNameContainers_btn">
                                <el-button type="primary" size="mini" @click="startAnswer"
                                    style="margin-right:0px;">开始答题</el-button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 倒计时 -->
            <div class="answerCountDown">
                <div class="answerCountDown_content">
                    <Countdown :end-time="getdeadline(testLimitNUm * 60)"></Countdown>

                </div>
            </div>
            <!-- 答题卡 -->
            <!-- <div class="answerBtn">
                答题<br>卡
            </div> -->
            <!-- 答题卡弹出 -->
            <div class="answerDailog" v-if="readyStatus && isStart">
                <div class="answerDailog_containers">
                    <div class="answerDailog_containers_content">
                        <div class="answerDailog_containers_content_top">
                            答题卡
                        </div>

                        <div class="answerDailog_containers_content_mid" v-if="isStart">
                            <div class="answerDailog_containers_content_mid_timeOut">

                                <timeoutCountdown :star-time="getStartline(0)" ref="timeoutCountdown"
                                    @setEndtime="setEndtimeEvent"></timeoutCountdown>

                            </div>
                        </div>


                        <div class="answerDailog_containers_content_btn">
                            <el-button type="success" size="mini" :disabled="isStart ? false : true" @click="submit()">提
                                交</el-button>
                        </div>
                        <div class="answerDailog_containers_content_bottom">
                            <div class="answerDailog_containers_content_bottom_list">
                                <div class="answerDailog_containers_content_bottom_list_item"
                                    :class="flag == index ? 'red' : ''" @click="jumpQuestion(item, index)"
                                    v-for="(item, index) in answerMap">
                                    {{ index + 1 }}、<span v-if="getAnswerEvent(index)">{{ getAnswerEvent(index)
                                        }}</span><span v-else>未答</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交答题卡结果 -->
            <el-dialog title="" :visible.sync="resultdialogVisible" width="400px" v-if="resultdialogVisible"
                :close-on-click-modal="false" :show-close="false">
                <div class="resultdialogContainers">
                    <div class="resultdialogContainers_content">
                        <div class="resultdialogContainers_content_top">
                            <!-- <div class="resultdialogContainers_content_top_title">
                                答题卡
                            </div> -->
                            <div class="resultdialogContainers_content_top_score">
                                {{ TotalResult.score}}分
                            </div>
                            <div class="resultdialogContainers_content_top_time">
                                总用时:{{ endTime }}
                            </div>
                            <div class="resultdialogContainers_content_top_info">
                                总题目<span class="spanNum">{{ TotalResult.totalNum }}</span>题，准确<span class="spanNum">{{
                    TotalResult.replyNum }}</span>题，错误<span class="spanNum">{{ TotalResult.totalNum -
                    TotalResult.replyNum }}</span>题，成绩<span class="oriRed spanNum">{{ TotalResult.score
                                    }}</span>分
                            </div>
                        </div>
                        <div class="resultdialogContainers_content_list">
                            <div class="resultdialogContainers_content_list_item" v-for="(item, index) in answerMap">
                                <div class="resultdialogContainers_content_list_item_left">
                                    {{ index + 1 }}、<span v-if="getAnswerEvent(index)">{{ getAnswerEvent(index)
                                        }}</span>
                                </div>
                                <div class="resultdialogContainers_content_list_item_result">
                                    <i class="el-icon-check blue resultIcon" v-if="item[1]['result'] == 1"></i>
                                    <i class="el-icon-close oriRed resultIcon" v-else-if="item[1]['result'] == 2"></i>
                                    <span v-else>未答</span>

                                </div>
                                <!-- <div class="resultdialogContainers_content_list_item_btnGroup">
                                    <el-button type="text">查看</el-button>
                                    <el-button type="text" v-if="item.result == 1 || item.result == 2">答案解析</el-button>
                                    <el-button type="text">收藏</el-button>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <!-- <el-button @click="closeReset">关闭，重新答题</el-button> -->
                    <el-button type="primary" @click="closeReset" size="mini">完 成</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import timeoutCountdown from '@/components/common/timeoutCountdown.vue'
import Countdown from '@/components/common/Countdown.vue'
export default {
    name: 'chapterExercises',
    props: {
        testLimit:{
            type: [String,Number],
            default: 0 // 限制时间
        },
        type: {
            type: String,
            default: '2' //  2 全真模拟   3 正式考试
        }
    },
    components: {
        timeoutCountdown,
        Countdown
    },
    data() {
        return {
            resultdialogVisible: false,
            isStart: false,
            optionName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            num: 0,//轮播标记
            flag: 0,//做题标记
            progress: 0,//进度条宽度,
            styleFlag: -1,//选中的标记 
            answerMap: new Map(),
            answerList: [],
            questionsArry: [
                {
                    questionType: 1,
                    name: "精力充沛吗吗？精力力吗？精力力充沛吗沛吗精力充沛吗精力充沛吗?",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "容易疲乏吗？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "说话声音体弱无力吗？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "感到闷闷不乐，情绪低沉吗？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "比一般人耐受不了寒冷吗？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "能适应外界自然和社会环境的变化？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "容易失眠吗？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "容易忘事（健忘）吗？",
                    score: 10
                }, {
                    questionType: 1,
                    name: "容易疲劳吗？",
                    score: 10
                },
                {
                    questionType: 1,
                    name: "容易感冒吗？",
                    score: 10
                }

            ],
            chooseArry: [["第一题没有（根本不）不）1", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第二题没有（根本不）2", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第三题没有（根本不）3", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第四题没有（根本不）4", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第五题没有（根本不）5", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第六题没有（根本不）6", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第七题没有（根本不）7", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第八题没有（根本不）8", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第九题没有（根本不）9", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"],
            ["第十题没有（根本不）10", "很少（有一点）", "有时（有些）", "经常（相当）", "总是（非常）"]],
            testRadio: 1,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: undefined,
                name: undefined,
            },
            endTime: '',
            readyStatus: false,
            questionArr: [
                { label: '第一章练习题', value: '1' },
                { label: '第二章练习题', value: '2' }
            ],
            selectQuestion: '',
            TotalResult: {
                totalNum: 0,
                replyNum: 0,
                score: 0
            },
            testLimitNUm:0


        };
    },
    mounted() {
        const { state } = this.$store;
        this.queryParams.id = this.questionArr[0].value
        this.queryParams.name = this.questionArr[0].label
        this.testLimitNUm=Number(this.testLimit)
        this.searchQuestEvent()
    },
    computed: {

    },
    methods: {
        getdeadline(value) {
            // 获取当前时间
            var now = new Date();
            // 当前时间加上200000秒
            now.setSeconds(now.getSeconds() + value);
            // 输出结果
            return now
        },
        getTotalResult() {
            this.TotalResult.score = 0
            this.TotalResult.replyNum = 0
            console.log(this.answerMap)
            const myValuesArray = Array.from(this.answerMap.values());
            this.TotalResult.totalNum = myValuesArray.length
            myValuesArray.forEach((item, index) => {
                console.log(item)
                if (item['result'] == 1) {// 正确的
                    this.TotalResult.replyNum += 1
                    this.TotalResult.score += Number(item['score'])
                }
            })
            this.resultdialogVisible = true
            this.$message({
                message: '提交成功！',
                type: 'success',
                center: true
            });
        },
        selectqureyParams(e) {
            console.log(e)
            let obj = this.questionArr.find((item, index) => {
                return item.value == e;
            })
            console.log(obj)
            if (obj) {
                this.queryParams.name = obj.label
            }
            this.searchQuestEvent()
        },
        searchQuestEvent() {
            this.resetQuest()
        },
        resetQuest() {
            let that = this
            this.questionsArry.forEach(function (item, index) {
                let obj = {
                    value: null,
                    score: item.score,
                    result: 0,//0 未答  1 对  2错误
                }
                that.answerMap.set(index, obj)
            })
            that.flag = 0
            that.progress = 0
            that.styleFlag = -1
            that.readyStatus = true
            this.startAnswer()
        },
        closeReset() {
            this.isStart = false
            this.resultdialogVisible = false
            this.resetQuest()
            history.back(-1)

        },
        getChineTEXT(text) {//显示中文
            if (text.indexOf(' ') > 0) {// 分割天
                let arrA = text.split(' ')
                let arrB = arrA.split(':')
                return arrA[0] + '天' + arrB[0] + '小时' + arrB[1] + '分' + arrB[2] + '秒'

            } else {
                let arra = text.split(':')
                console.log(arra)
                if (arra && arra.length == 3) {
                    return arra[0] + '小时' + arra[1] + '分' + arra[2] + '秒'
                } else if (arra && arra.length == 2) {
                    return arra[0] + '分' + arra[1] + '秒'
                } else {
                    return ''
                }
            }
        },
        setEndtimeEvent(time) {
            this.endTime = this.getChineTEXT(time)
            this.getTotalResult()

        },
        startAnswer() {
            this.isStart = true
        },
        jumpQuestion(item, index) {
            // if (!this.isStart) {
            //     this.$message.warning("请点击开始答题~");
            //     return false
            // }
            this.flag = index
            if (this.answerMap.get(index).value == undefined || this.answerMap.get(index).value == null) {
                this.styleFlag = -1
            } else {
                this.styleFlag = this.answerMap.get(index).value;
            }
            //修改进度条进度
            this.progress = Math.round((this.flag * 100 / (this.questionsArry.length - 1)));
        },
        getAnswerEvent(value) {
            if (this.answerMap.get(value).value == undefined || this.answerMap.get(value).value == null) {
                return false
            } else {
                // console.log(this.optionName[Number(this.answerMap.get(value).value)])
                return this.optionName[Number(this.answerMap.get(value).value)]
            }
        },
        getStartline(value) {
            // 获取开始时间
            var now = new Date();
            // 当前时间加上200000秒
            now.setSeconds(now.getSeconds() - value);
            // 输出结果
            return now
        },
        //上一题
        backQuestion(index) {
            if (this.flag == 0) {//当下标为0时，停止--
                this.flag = 0;
            } else {
                this.flag--;
            }
            //修改进度条进度
            this.progress = Math.round((this.flag * 100 / (this.questionsArry.length - 1)));
            //还原
            //this.styleFlag=960519152;
            this.styleFlag = this.answerMap.get(index - 1).value;
        },
        //下一题
        nextQuestion(index) {
            if (!this.isStart) {
                this.$message.warning("请点击开始答题~");
                return false
            }
            //console.log("这是下标为"+index+"的题");              
            if (this.answerMap.get(index).value >= 0) {
                if (this.flag == this.questionsArry.length - 1) { //当下标和题目数组长度-1相等时，重置此标记为数组长度，防止数组超出范围
                    this.flag = this.questionsArry.length - 1; //小标要比长度少一位，所以把长度-1 把值给下标
                } else {
                    this.flag++;
                }
                //修改进度条进度
                this.progress = Math.round(((this.flag) * 100 / (this.questionsArry.length - 1)));
                //如果是最后一条则进行弹出框提示已经完成 
                if (index == this.questionsArry.length - 1) {

                    // console.log(this.answerMap);

                    this.$refs.timeoutCountdown.getEndTime()
                } else {
                    //如果不是最后一条值则把下一题的下标给他
                    this.styleFlag = this.answerMap.get(index + 1).value;
                }
            } else {  //如果此题没有进行选择，那么就不能继续进行（flag也不能在进行累加）
                this.$message({
                    message: '当前题目未选择！',
                    type: 'warning'
                });
                return false;
            }
        },
        //选择
        getChoose(index, indexs) {
            console.log("这是下标为" + index + "的题,选择的是下标为" + indexs + "项答案");
            //将已选中的下标传过来，并把值赋予给我们声明的标记，让表达式成立，因为下标是唯一的，就保证了样式的唯一性
            this.styleFlag = indexs;
            //this.nextQuestion();
            //var info=document.getElementById("list-group-item-id").getElementsByTagName("li");  
            //将题号和选项放入map对象
            var arr = [1, 2];
            var a = arr[Math.floor(Math.random() * arr.length)]
            let obj = {
                value: indexs,
                score: this.questionsArry[index].score,
                result: a,//0 未答  1 对  2错误
            }
            this.answerMap.set(index, obj);
            console.log(this.answerMap)


        },
        //提交
        submit() {
            //判断最后一题是否做了
            this.nextQuestion(this.questionsArry.length - 1);
        }
    },
};
</script>

<style scoped lang="scss">
.answerCountDown {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;

    &_content {
        width: 130px;
        height: 30px;
        font-size: 13px;
        background: #266eff;
        box-shadow: 0px 4px 13px 0px rgba(66, 66, 157, 0.6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        text-align: center;
    }
}

.resultdialogContainers {
    &_content {
        &_top {
            &_time {
                font-size: 16px;
                font-weight: 700;
                padding: 5px 0px;
            }
            &_score{
                width:56px;
                    height: 56px;
                    font-size: 13px;
                    background: #f56c6c;
                    box-shadow: 0px 4px 13px 0px rgba(157, 90, 66, 0.6);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius:56px;
                    text-align: center;
                font-size: 18px;
                  
                    font-weight: 700;
                    margin:0 auto;
            }
            &_info {
                font-size: 14px;
                padding: 5px 0px;

                .spanNum {
                    font-size: 18px;
                    padding: 0 4px;
                    font-weight: 700;
                }
            }
        }

        &_list {
            &_item {
                padding: 4px 0px;
                display: flex;
                align-items: center;

                &_left {
                    min-width: 60px;
                }

                &_btnGroup {
                    ::v-deep .el-button {
                        line-height: 1.5;
                        font-size: 14px;
                        padding: 0px 5px !important;
                    }
                }

                &_result {
                    width: 40px;
                    padding: 0 3px;

                    .resultIcon {
                        font-size: 16px;
                        font-weight: 700;
                    }
                }
            }
        }
    }
}

.questionNameContainers {
    margin-top: 130px;
    display: flex;
    align-items: center;
    justify-content: center;

    &_content {
        .questionName {
            font-size: 16px;
            line-height: 50px;
        }
    }

    &_btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.red {
    color: #ff6000 !important;
}

.blue {
    color: #266eff !important;
}

.oriRed {
    color: red !important;
}

.answerDailog {
    position: absolute;
    right: 10px;
    top: 60px;
    width: 140px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0px 4px 13px 0px rgba(66, 66, 157, 0.6);
    border-radius: 6px;

    &_containers {
        &_content {
            &_top {
                line-height: 30px;
                font-size: 16px;
                font-weight: 700;
                text-align: center;
                border-bottom: 1px solid #f5f5f5;
            }

            &_mid {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5px;

                &_timeOut {
                    width: 120px;
                    height: 30px;
                    font-size: 13px;
                    background: #f56c6c;
                    box-shadow: 0px 4px 13px 0px rgba(157, 90, 66, 0.6);
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 30px;
                    text-align: center;
                }
            }

            &_btn {
                margin-top: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &_bottom {
                padding: 10px;

                &_list {
                    &_item {
                        cursor: pointer;
                        padding: 5px 0px;
                    }
                }
            }
        }

    }

}

.answerBtn {
    position: absolute;
    right: 10px;
    top: 60px;
    width: 50px;
    height: 50px;
    line-height: 18px;
    font-size: 13px;
    padding: 6px;
    color: #fff;
    text-align: center;
    background: #266eff;
    border-radius: 50px;
    box-sizing: border-box;
    box-shadow: 0px 4px 13px 0px rgba(66, 66, 157, 0.6);
    cursor: pointer;
}

.chapterExercisesContainers {
    background: #fff;
    height: 100%;
    width: 100%;
    position: relative;

    &_containers {
        padding: 10px;

        &_top {
            &_radioContainers {
                padding-bottom: 10px;
            }
        }

        &_content {
            width: calc(100% - 145px);
        }
    }

    .list {

        &_groupContainer {
            padding: 10px;
            padding-left: 30px;

            &_group {
                &_item {
                    padding: 8px 0px;
                    cursor: pointer;
                }
            }

            &_buttonGroup {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &_progressContainers {
                position: absolute;
                bottom: 10px;
                left: 0px;
                width: calc(100% - 145px);

                &_div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                &_progress {
                    margin-top: 10px;
                    margin-bottom: 10px;
                    text-align: center;
                    width: 70%;
                    background: #f5f5f5;
                    height: 5px;
                    border-radius: 5px;

                    &_text {
                        margin-left: 10px;
                    }
                }

                .progress-bar {
                    height: 5px;
                    background: #ff6000;
                    border-radius: 5px;
                }

                &_text {
                    text-align: center;
                }

            }
        }
    }


    .container_p2 {
        line-height: 25px;
        color: #111;
        font-weight: 700;
        letter-spacing: 1.2px;
        font-size: 18;
    }



    .chooseStyle {
        color: #ff6000;
        border-right-color: #ff6000 !important;
        border-right-width: 3px !important;
    }






}
</style>
